<template>
  <div class="component-properties">
    <!-- 基础属性 - 所有组件都有的属性 -->
    <div class="w-6/12">
      <h3 class="text-sm font-medium text-gray-500 mb-3 pb-1 border-b">基础属性</h3>
      
      <el-form size="small" label-width="80px">
        <el-form-item label="组件名称">
          <el-input v-model="component.label" @change="handlePropertyChange({ label: component.label })" />
        </el-form-item>
        
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="X 坐标">
              <el-input-number 
                v-model="component.x" 
                :min="0" 
                @change="handlePropertyChange({ x: component.x })"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Y 坐标">
              <el-input-number 
                v-model="component.y" 
                :min="0" 
                @change="handlePropertyChange({ y: component.y })"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="宽度">
              <el-input-number 
                v-model="component.width" 
                :min="10" 
                @change="handlePropertyChange({ width: component.width })"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="高度">
              <el-input-number 
                v-model="component.height" 
                :min="10" 
                @change="handlePropertyChange({ height: component.height })"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="层级">
          <el-input-number 
            v-model="component.zIndex" 
            :min="1" 
            @change="handlePropertyChange({ zIndex: component.zIndex })"
          />
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 样式属性 - 根据组件类型显示不同的样式设置 -->
    <div class="property-section mb-6">
      <h3 class="text-sm font-medium text-gray-500 mb-3 pb-1 border-b">样式属性</h3>
      
      <el-form size="small" label-width="80px">
        <!-- 背景颜色 -->
        <el-form-item label="背景颜色" v-if="showBackgroundColor">
          <el-color-picker 
            v-model="component.backgroundColor" 
            @change="handlePropertyChange({ backgroundColor: component.backgroundColor })"
          />
        </el-form-item>
        
        <!-- 边框设置 -->
        <template v-if="showBorderSettings">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="边框宽度">
                <el-input-number 
                  v-model="component.borderWidth" 
                  :min="0" 
                  @change="handlePropertyChange({ borderWidth: component.borderWidth })"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="边框颜色">
                <el-color-picker 
                  v-model="component.borderColor" 
                  @change="handlePropertyChange({ borderColor: component.borderColor })"
                />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="圆角半径">
            <el-input-number 
              v-model="component.borderRadius" 
              :min="0" 
              @change="handlePropertyChange({ borderRadius: component.borderRadius })"
            />
          </el-form-item>
        </template>
        
        <!-- 文本相关样式 -->
        <template v-if="showTextSettings">
          <el-form-item label="文本内容">
            <el-input 
              v-model="component.content" 
              type="textarea"
              @change="handlePropertyChange({ content: component.content })"
            />
          </el-form-item>
          
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="字体大小">
                <el-input-number 
                  v-model="component.fontSize" 
                  :min="12" 
                  @change="handlePropertyChange({ fontSize: component.fontSize })"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="文本颜色">
                <el-color-picker 
                  v-model="component.color" 
                  @change="handlePropertyChange({ color: component.color })"
                />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="文本对齐">
            <el-select 
              v-model="component.textAlign" 
              @change="handlePropertyChange({ textAlign: component.textAlign })"
            >
              <el-option label="左对齐" value="left" />
              <el-option label="居中对齐" value="center" />
              <el-option label="右对齐" value="right" />
            </el-select>
          </el-form-item>
        </template>
        
        <!-- 图表相关属性 -->
        <template v-if="showChartSettings">
          <el-form-item label="图表标题">
            <el-input 
              v-model="component.title" 
              @change="handlePropertyChange({ title: component.title })"
            />
          </el-form-item>
          
          <el-form-item label="显示图例">
            <el-switch 
              v-model="component.showLegend" 
              @change="handlePropertyChange({ showLegend: component.showLegend })"
            />
          </el-form-item>
        </template>
        
        <!-- 图片相关属性 -->
        <template v-if="showImageSettings">
          <el-form-item label="图片地址">
            <el-input 
              v-model="component.src" 
              @change="handlePropertyChange({ src: component.src })"
            />
          </el-form-item>
          
          <el-form-item label="图片描述">
            <el-input 
              v-model="component.alt" 
              @change="handlePropertyChange({ alt: component.alt })"
            />
          </el-form-item>
          
          <el-form-item label="图片填充">
            <el-select 
              v-model="component.fit" 
              @change="handlePropertyChange({ fit: component.fit })"
            >
              <el-option label="拉伸" value="fill" />
              <el-option label="保持比例" value="contain" />
              <el-option label="覆盖" value="cover" />
              <el-option label="原始大小" value="none" />
            </el-select>
          </el-form-item>
        </template>
      </el-form>
    </div>
    
    <!-- 组件特定属性 -->
    <div class="property-section" v-if="component.type === 'bar-chart' || component.type === 'line-chart'">
      <h3 class="text-sm font-medium text-gray-500 mb-3 pb-1 border-b">数据配置</h3>
      
      <el-form size="small" label-width="80px">
        <el-form-item label="数据源">
          <el-select 
            v-model="component.dataSourceType" 
            @change="handlePropertyChange({ dataSourceType: component.dataSourceType })"
          >
            <el-option label="静态数据" value="static" />
            <el-option label="API接口" value="api" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="API地址" v-if="component.dataSourceType === 'api'">
          <el-input 
            v-model="component.apiUrl" 
            @change="handlePropertyChange({ apiUrl: component.apiUrl })"
          />
        </el-form-item>
        
        <el-form-item label="刷新频率(秒)" v-if="component.dataSourceType === 'api'">
          <el-input-number 
            v-model="component.refreshInterval" 
            :min="5" 
            :step="5"
            @change="handlePropertyChange({ refreshInterval: component.refreshInterval })"
          />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { defineProps,  computed } from 'vue';

export default {
  name: 'ComponentProperties',
  props: {
    component: {
      type: Object,
      required: true,
      description: '当前选中的组件'
    }
  },
  emits: ['update'],
  setup(props, { emit }) {
    // 根据组件类型决定显示哪些属性面板
    const showBackgroundColor = computed(() => {
      const { type } = props.component;
      // 这些组件显示背景颜色设置
      return ['text', 'rectangle', 'circle', 'button', 'container', 'card', 'tabs'];
    });
    
    const showBorderSettings = computed(() => {
      const { type } = props.component;
      // 这些组件显示边框设置
      return ['rectangle', 'circle', 'button', 'container', 'card', 'tabs'];
    });
    
    const showTextSettings = computed(() => {
      const { type } = props.component;
      // 这些组件显示文本设置
      return ['text', 'button', 'container', 'card', 'tabs'];
    });
    
    const showChartSettings = computed(() => {
      const { type } = props.component;
      // 这些组件显示图表设置
      return ['bar-chart', 'line-chart', 'pie-chart', 'gauge-chart', 'radar-chart', 'table'];
    });
    
    const showImageSettings = computed(() => {
      const { type } = props.component;
      // 图片组件显示图片设置
      return type === 'image';
    });
    
    // 处理属性变更
    const handlePropertyChange = (props) => {
      emit('update', props);
    };
    
    return {
      showBackgroundColor,
      showBorderSettings,
      showTextSettings,
      showChartSettings,
      showImageSettings,
      handlePropertyChange
    };
  }
};
</script>

<style scoped>
.property-section {
  padding: 2px 0;
}

.el-form-item {
  margin-bottom: 12px;
}
</style>
    